<template>
  <div class="my-orders">
    <div class="page-header">
      <h1>我的订单</h1>
    </div>
    
    <div class="orders-container">
      <el-card v-for="order in orders" :key="order.id" class="order-card">
        <div class="order-header">
          <div class="hotel-info">
            <h3>{{ order.hotelName }}</h3>
            <p class="location">{{ order.location }}</p>
          </div>
          <div class="order-status">
            <el-tag :type="getStatusType(order.status)">{{ order.status }}</el-tag>
          </div>
        </div>
        
        <div class="order-details">
          <div class="detail-item">
            <span class="label">入住时间：</span>
            <span>{{ order.checkIn }}</span>
          </div>
          <div class="detail-item">
            <span class="label">退房时间：</span>
            <span>{{ order.checkOut }}</span>
          </div>
          <div class="detail-item">
            <span class="label">房间数：</span>
            <span>{{ order.rooms }}间</span>
          </div>
          <div class="detail-item">
            <span class="label">入住人数：</span>
            <span>{{ order.guests }}人</span>
          </div>
        </div>
        
        <div class="order-footer">
          <div class="price">
            <span class="total-price">¥{{ order.totalPrice }}</span>
            <span class="price-detail">共{{ order.nights }}晚</span>
          </div>
          <div class="actions">
            <el-button size="small" @click="viewDetails(order)">查看详情</el-button>
            <el-button v-if="order.status === '已确认'" size="small" type="primary" @click="cancelOrder(order)">取消订单</el-button>
          </div>
        </div>
      </el-card>
      
      <div v-if="orders.length === 0" class="empty-state">
        <el-empty description="暂无订单">
          <el-button type="primary" @click="goToHome">去预订酒店</el-button>
        </el-empty>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const router = useRouter()

const orders = ref([
  {
    id: 1,
    hotelName: '北京王府井希尔顿酒店',
    location: '北京市东城区',
    checkIn: '2024-01-15',
    checkOut: '2024-01-17',
    rooms: 1,
    guests: 2,
    nights: 2,
    totalPrice: 1200,
    status: '已确认'
  },
  {
    id: 2,
    hotelName: '上海外滩华尔道夫酒店',
    location: '上海市黄浦区',
    checkIn: '2024-01-20',
    checkOut: '2024-01-22',
    rooms: 2,
    guests: 4,
    nights: 2,
    totalPrice: 2400,
    status: '已完成'
  }
])

const getStatusType = (status: string) => {
  switch (status) {
    case '已确认':
      return 'success'
    case '已完成':
      return 'info'
    case '已取消':
      return 'danger'
    default:
      return 'warning'
  }
}

const viewDetails = (order: any) => {
  ElMessage.info(`查看订单 ${order.id} 的详细信息`)
}

const cancelOrder = (order: any) => {
  ElMessage.warning(`取消订单 ${order.id}`)
}

const goToHome = () => {
  router.push('/home')
}

onMounted(() => {
  // 这里可以加载用户的真实订单数据
})
</script>

<style scoped>
.my-orders {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.page-header {
  margin-bottom: 30px;
}

.page-header h1 {
  color: #333;
  font-size: 28px;
}

.orders-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.order-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 15px;
}

.hotel-info h3 {
  margin: 0 0 5px 0;
  color: #333;
  font-size: 18px;
}

.location {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.order-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  margin-bottom: 15px;
}

.detail-item {
  display: flex;
  align-items: center;
}

.label {
  font-weight: 500;
  color: #666;
  margin-right: 5px;
}

.order-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 15px;
  border-top: 1px solid #f0f0f0;
}

.total-price {
  font-size: 20px;
  font-weight: bold;
  color: #e6a23c;
}

.price-detail {
  margin-left: 10px;
  color: #666;
  font-size: 14px;
}

.actions {
  display: flex;
  gap: 10px;
}

.empty-state {
  text-align: center;
  padding: 60px 0;
}
</style>

